<template>
  <div class="body">
    <!-- 顶部背景 -->
    <div class="head_line">
      <p class="line"></p>
      <p class="bj"></p>
    </div>

    <!-- 步骤 -->
    <div class="step_box">
      

      <!-- <el-row :gutter="20">
        <el-col :span="8" > -->
          <div class="step" v-for="(item, index) in stepList" :key="index">
            <div class="quan" v-if="stepNum == index">
              <p></p>
            </div>
            <p class="mr_quan" v-else></p>

            <p :class="stepNum == index ? 'text text_on' : 'text'">{{ item }}</p>
            
            <p class="line"></p>
          </div>
        <!-- </el-col>
      </el-row> -->
    </div>

    <!-- 第一步 -->
    <model-step1 ref="childRefOne" @anniuNum="downClick" v-loading="nextLoading" @fileList="getFileList" v-if="stepNum == 0" :bailId="props.bailId" :bailInfo="bailInfo"/>

    <!-- 第二步 -->
    <!-- <model-step2 @fileList="getFileListTwo" :bailId="props.bailId" ref="childRef" v-if="stepNum == 1" /> -->

    <!-- 第三步 -->
    <model-step3 @check="querenCheck" ref="lastChildRef" :bailId="props.bailId" :bailInfo="bailInfo" v-if="stepNum == 1" />

    <!-- 下一步 -->
    <div class="foot_btn">
      <el-button v-if="stepNum == 0" :disabled="nextLoading" @click="handleCloseDrawer">取消</el-button>
      <el-button v-else :disabled="nextLoading" @click="upper">上一步</el-button>
      <el-button 
        :loading="nextLoading" 
        @click="generateEwm" 
        :disabled="nextLoading"
        v-if="stepNum == 1" 
        type="primary"
      >发起审批</el-button
      >
      <el-button v-else type="primary" :loading="nextLoading" @click="nextStep"
        >下一步</el-button
      >
    </div>

    <!-- 查看异常 -->
    <el-dialog v-model="warningVisible" width="500" center>
      <div class="warning_box">
        <p class="icon"><el-icon><WarningFilled /></el-icon></p>
        <p class="tips">提示</p>
        <p class="text">{{warningText}}</p>
        <div class="footer">
          <el-button @click="warningVisible = false">我再想想</el-button>
          <el-button type="primary">立即缴费</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 二维码 -->
    <el-dialog v-if="ewmVisible" title="" v-model="ewmVisible" width="1150">
      <scan-ewm :isButton="true" :isFq="true" @closeDrawer="close" :bailId="bailInfo.bail_id" :processId="bailInfo.id"></scan-ewm>
    </el-dialog>

    
  </div>
</template>

<script setup lang="ts" name="FormModel">
import { ElNotification, ElMessageBox } from 'element-plus'
import { ElLoading } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
import ModelStep1 from "./ModelStep1.vue";
import ModelStep2 from "./ModelStep2.vue";
import ModelStep3 from "./ModelStep3.vue";

import ScanEwm from "./ScanEwm.vue";


import { reactive, watch, ref,onMounted } from "vue";
import { defineProps, defineEmits } from "vue";
import { getBailInfo,updateCaseInfo } from "@/api/bond/pay";

import { checkCondition,saveTkBank } from "@/api/bond/refund";

const router = useRouter();

const props = defineProps({
  bailId:{
    type: Number,
  }
});

// 步骤数据
let stepList = reactive(
  ["确认案件信息","确认退款方式"]
);
let stepNum = ref(-1);


onMounted(() => {
  getInfo()
});

// 获取案件详情
let bailInfo = ref({});
const getInfo = async () => {
  await getBailInfo({ process_id: props.bailId }).then((res) => {
    if (res.code == 1) {
      bailInfo.value = res.data;
      stepNum.value = 0
    }
  });
};

// 查看异常
let warningVisible = ref<boolean>(false);
let warningText = ref('')
const warningClick = () => {
  warningVisible.value = true;
};

// 发起审批
let lastChildRef = ref(null)
let ewmVisible = ref(false)
const generateEwm =()=>{
  nextLoading.value = true

  let tabIndex = lastChildRef.value.tabIndex
  let ylMsg = lastChildRef.value.ylMsg
  let dgMsg = lastChildRef.value.dgMsg
  let notes = lastChildRef.value.notes

  let data = {
    bail_id:bailInfo.value.bail_id,
    process_id:bailInfo.value.id,
    card_id:tabIndex == 1?ylMsg.id:tabIndex == 2?dgMsg.public_bank.card_id:'',
    account_type:tabIndex == 0?'refund':tabIndex == 1?'personal':'public',
    notes
  }
  console.log(data)
  saveTkBank(data).then(res=>{
    if(res.code == 1){
      ewmVisible.value = true
      nextLoading.value = false
    }else{
      nextLoading.value = false
      ElNotification({ message: res.msg, type: "warning" });
    }
  })
}

const emit = defineEmits(['closeModel']);
// 关闭凭证弹窗
const close =()=>{
  emit("closeModel");
  ewmVisible.value = false
}

/*===上一步===*/
const upper =()=>{
  stepNum.value--;
}

/*===提交-进行下一步===*/
let nextLoading = ref(false);
let childRefOne = ref(null)
const nextStep = () => {
  if(stepNum.value == 0){// 第一步提交
    nextLoading.value = true
    let canshu = {
      bail_id:bailInfo.value.bail_id,
      process_id:bailInfo.value.id,
    }
    checkCondition(canshu).then(res=>{
      nextLoading.value = false
      if(res.code == 1){
        stepNum.value++;
      }else{
        // warningVisible.value = true
        // warningText.value = res.msg
        ElNotification({ message: res.msg, type: "warning" });
      }
    })
    return
    stepNum.value++;
  }

};

// 确认无误
let querenLoading = ref(true)
const querenCheck=(e)=>{
  console.log(e)
  querenLoading.value = e
}


</script>

<style lang="scss" scoped>
.body {
  position: relative;
}
.head_line {
  .line {
    width: 100%;
    height: 8px;
    background: #1c55d1;
  }
  .bj {
    height: 46px;
    background: linear-gradient(
      180deg,
      rgba(0, 80, 255, 0.25) 0%,
      rgba(0, 80, 255, 0.1314) 20%,
      rgba(0, 80, 255, 0.0508) 59%,
      rgba(28, 85, 209, 0) 87%
    );
  }
}
.step_box {
  margin:0 30px;
  margin-bottom: 60px;
  display: flex;
  justify-content: center;
  .step {
    display: flex;
    align-items: center;
    .quan {
      width: 28px;
      height: 28px;
      background: #0046df;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        width: 12px;
        height: 12px;
        background: #ffffff;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
        border-radius: 50%;
      }
    }
    .mr_quan {
      width: 28px;
      height: 28px;
      background: #edf1f6;
      border-radius: 50%;
    }
    .text {
      font-size: 15px;
      color: #44567c;
      margin-left: 12px;
    }
    .text_on {
      color: #0046df;
      font-weight: 500;
    }
    .line {
      width: 80px;
      height: 2px;
      box-sizing: border-box;
      border: 1px dashed #edf1f6;
      margin: 0 12px;
    }
    &:last-child {
      .line {
        display: none;
      }
    }
  }
}
.foot_btn {
  // position: absolute;
  // bottom:80px;
  text-align: center;
  width: 100%;
  padding: 50px 0;
}
.warning_box{
  .icon{
    color:#FF0000;
    text-align: center;
    font-size:40px;
  }
  .tips{
    font-size: 18px;
    color: #333333;
    text-align: center;
    margin-top:8px;
  }
  .text{
    font-size: 18px;
    color: #666666;
    text-align: center;
    margin:23px 0 60px 0;
  }
  .footer{
    text-align: center;
  }
}
</style>
